{% extends 'base.html' %}

{% block title %} 商品详情 {% endblock %}

{% block page_name %} 商品详情 {% endblock %}

{% block content %}
	<div class="products">
		<div class="container">
			<div class="agileinfo_single">

				<div class="col-md-4 agileinfo_single_left" style="height: 300px;width: 300px;">
					<!--商品图片-->
					<img id="example" style="height: 236px;width: 300px;" src="{{ detail_product.product_img }}" alt=" " class="img-responsive">
				</div>
				<div class="col-md-8 agileinfo_single_right">
					<!--商品名称-->
				<h2>{{ detail_product.product_name }}</h2>
					<div class="w3agile_description">
						<h4>描述 :</h4>
						<!--商品描述-->
						<p>{{ detail_product.product_description }}</p>
					</div>
					<div class="snipcart-item block">
						<div class="snipcart-thumb agileinfo_single_right_snipcart">
							<!--商品价格-->
							<h4 class="m-sing">${{ detail_product.product_price }}</h4>
						</div>
						<!--加入购物车-->
						<div class="snipcart-details agileinfo_single_right_details">
                            <input id="btn_addCart" style="position: relative; float: left; margin-left: 0; margin-top: 0;height: 34px;width: 100px;" type="button" class="button" value="加入购物车">
                            <input id="btn_addFavorite" style="position: relative; float: left; margin-left: 120px; margin-top: -34px;height: 34px;width: 100px;" value="添加到收藏夹" type="button" class="button">
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
            <div class="sure_discount" style="visibility: hidden; width: 500px; height: 200px; position: relative; float: left; margin-left: 350px; margin-top: -250px;background-color: aliceblue;">
                <p style="margin-top: 10px;">商品名称：{{ detail_product.product_name }}</p>
                <p style="margin-top: 10px;">商品数量：<input id="p_discount" type="number" placeholder="请输入商品数量"> </p>
                <button id="do_addFav" class="button" style="margin-top: 10px;">添加到购物车</button>
            </div>
		</div>

	</div>
    <script>
        $(document).ready(function () {
            {#弹出添加到购物车页面#}
            $("#btn_addCart").click(function () {
                $(".sure_discount").css("visibility", "visible");
            });

            {#添加到购物车#}
            $("#do_addFav").click(function () {
                var p_discount = $("#p_discount").val();
                $.ajax({
                    type: 'POST',
                    url: '{% url 'comet:addToCart' %}',
                    data: {
                        p_id: {{ detail_product.product_id }},
                        product_discount: p_discount,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (data) {
                        if(data === 200) {
                            alert("添加购物车成功！");
                        }else {
                            alert("添加购物车失败！");
                        }

                    }
                });
            });

            {#添加到收藏夹#}
            $("#btn_addFavorite").click(function () {
                $.ajax({
                    type: 'POST',
                    url: '{% url 'comet:addToFavorite' %}',
                    data: {
                        p_id: {{ detail_product.product_id }},
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (data) {
                        if(data === 200) {
                            alert("添加到收藏夹成功！");
                        }else {
                            alert("添加到收藏夹失败！");
                        }
                    }
                });
            });
        });

    </script>
{% endblock %}